<template>
  <div>
    <div v-show="!isShowDetail">
      <jxf-titletip :title="title" @refreshPage="refreshFuc"></jxf-titletip>
      <div>
        <el-card class="mt20">
          <el-form :inline="true" :model="searchInfo" ref="searchInfo">
            <el-form-item label="采购商企业名称:" prop="orderNo">
              <el-input v-model="searchInfo.orderNo" clearable ref="input-orderNo" @keyup.enter.native="enterNextInput('merchantName')"></el-input>
            </el-form-item>
            <el-form-item label="还款方式:" prop="repayType">
              <el-select v-model="searchInfo.repayType" clearable placeholder="全部">
                <el-option label="线上还款" value="0"></el-option>
                <el-option label="线下还款" value="1"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="违约状态:" prop="breakState">
              <el-select v-model="searchInfo.breakState" clearable placeholder="全部">
                <el-option label="未违约" value="0"></el-option>
                <el-option label="已违约" value="1"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="还款状态:" prop="repayStatus">
              <el-select v-model="searchInfo.repayStatus" clearable placeholder="全部">
                <el-option label="全额" value="0"></el-option>
                <el-option label="部分" value="1"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="审核状态:" prop="status">
              <el-select v-model="searchInfo.status" clearable placeholder="全部">
                <el-option label="待审核" value="0"></el-option>
                <el-option label="申请通过" value="1"></el-option>
                <el-option label="驳回" value="2"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSearch()">搜索</el-button>
            </el-form-item>
            <el-form-item>
              <el-button type="info" @click="resetForm('searchInfo')">重置</el-button>
            </el-form-item>
          </el-form>
        </el-card>
        <el-card class="jxf-table-card mt20">
          <div slot="header" class="clearfix">
            <span>数据列表</span>
            <div>
              <el-button type="primary" @click="exportExcel" :loading="isSuccess">导出</el-button>
            </div>
          </div>
          <jxf-table class="" :table="dataTable">
              <template slot="breakState" slot-scope="scope">
                <div v-if="scope.row.breakState == '0'">未违约</div>
                <div v-if="scope.row.breakState == '1'">已违约</div>
              </template>
              <template slot="outState" slot-scope="scope">
                <div v-if="scope.row.outState == '1'">已出账</div>
                <div v-if="scope.row.outState == '2'">未出单</div>
              </template>
              <template slot="repayType" slot-scope="scope">
                <div v-if="scope.row.repayType == '0'">线上还款</div>
                <div v-if="scope.row.repayType == '1'">线下还款</div>
              </template>
              <template slot="repayStatus" slot-scope="scope">
                <div v-if="scope.row.repayStatus == '0'">全额还款</div>
                <div v-if="scope.row.repayStatus == '1'">部分还款</div>
              </template>
              <template slot="status" slot-scope="scope">
                <div v-if="scope.row.status == '0'">待审核</div>
                <div v-if="scope.row.status == '1'">已通过</div>
                <div v-if="scope.row.status == '2'">已驳回</div>
              </template>
              <template slot="createTime" slot-scope="scope">
                <div>{{scope.row.createTime ? FormatDate.timeFormat(scope.row.createTime) : ""}}</div>
              </template>
              <template slot="repayCredit" slot-scope="scope">
                <div>￥{{scope.row.repayCredit && scope.row.repayCredit != 0 ? formatMoney.twoDecimal(scope.row.repayCredit) : '0.00'}}</div>
              </template>
              <template slot="repayInterest" slot-scope="scope">
                <div>￥{{scope.row.repayInterest && scope.row.repayInterest != 0 ? formatMoney.twoDecimal(scope.row.repayInterest) : '0.00'}}</div>
              </template>
              <template slot="credit" slot-scope="scope">
                <div>￥{{scope.row.credit && scope.row.credit != 0 ? formatMoney.twoDecimal(scope.row.credit) : '0.00'}}</div>
              </template>
              <template slot="repayPrincipal" slot-scope="scope">
                <div>￥{{scope.row.repayPrincipal && scope.row.repayPrincipal != 0 ? formatMoney.twoDecimal(scope.row.repayPrincipal) : '0.00'}}</div>
              </template>
              <template slot="operation" slot-scope="scope">
                <el-button type="text" @click="reviewModel(scope.row)" v-if="scope.row.status == '0'">审核</el-button>
                <el-button type="text" @click="watchDetail(scope.row)" v-else>审核记录</el-button>
              </template>
          </jxf-table>
        </el-card>
        <jxf-pagination class="mt20" :pageTotal="pageTotal" :currentPage.sync='currentPage' :pageSize.sync="pageSize"
                        @currentPageChange="currentPageChange" @pageSizeChange="pageSizeChange"></jxf-pagination>
      </div>
      <RepaymentApproval :isShowDetail.sync="isShowRepay" :dataInfo="dataInfo" @fresh="fresh"></RepaymentApproval>

    </div>
    <BillRepaymentDetail v-if="isShowDetail" :dataInfo="detailTable" @goBack="goBack" @fresh="fresh"></BillRepaymentDetail>
</div>
</template>

<script>
  import formatMoney from '@/assets/js/formatMoney'
  import FormatDate from '@/assets/js/formatDate'
  import RepaymentApproval from './components/RepaymentApproval'
  import BillRepaymentDetail from './components/BillRepaymentDetail'
    export default {
        name: "BillRepaymentAuditList",
        components: { RepaymentApproval, BillRepaymentDetail },
        data() {
          return {
            title: "账单还款审核",
            isShowDetail: false,
            isShowRepay: false,
            searchInfo: {
              breakState: null,
              enterpriseName: "",
              repayStatus: null,
              repayType: null,
              status: null
            },
            isSuccess: false,
            dataInfo: {},
            detailTable: {},
            formatMoney: formatMoney,
            FormatDate: FormatDate,
            dataTable: {
              border:true,
              loading:false,
              hasSelect:false,
              tr: [
                {
                  id: '1',
                  label: '还款编号',
                  fixed: "left",
                  prop: 'id'
                },
                {
                  id: '2',
                  minWidth: '140',
                  label: '采购商企业名称',
                  prop: 'enterpriseName'
                },
                {
                  id: '3',
                  minWidth: '120',
                  label: '账单所属月份',
                  prop: 'month'
                },
                {
                  id: '4',
                  label: '出账状态',
                  prop: 'outState',
                  show: 'template'
                },
                {
                  id: '5',
                  label: '违约状态',
                  prop: 'breakState',
                  show: 'template'
                },
                {
                  id: '6',
                  label: '应还总额',
                  width: '120',
                  show: 'template',
                  prop: 'credit'
                },
                {
                  id: '7',
                  label: '还款总额',
                  width: '120',
                  show: 'template',
                  prop: 'repayCredit'
                },
                {
                  id: '8',
                  label: '还款本金',
                  width: '120',
                  show: 'template',
                  prop: 'repayPrincipal'
                },
                {
                  id: '9',
                  label: '还款利息',
                  show: 'template',
                  prop: 'repayInterest'
                },
                {
                  id: '10',
                  label: '还款时间',
                  width: '160',
                  show: 'template',
                  prop: 'createTime'
                },
                {
                  id: '11',
                  label: '还款方式',
                  show: 'template',
                  prop: 'repayType'
                },
                {
                  id: '12',
                  label: '还款状态',
                  show: 'template',
                  prop: 'repayStatus'
                },
                {
                  id: '13',
                  label: '审核状态',
                  show: 'template',
                  prop: 'status'
                },
                {
                  id: '14',
                  label: '操作',
                  show: 'template',
                  fixed: 'right',
                  minWidth:"200",
                  prop: 'operation'
                }
              ],
              data: []
            },
            pageTotal:0,
            pageSize:10,
            currentPage:1
          }
        },
        methods: {
          // 导出
          exportExcel() {
            this.isSuccess = true;
            let data = {
              ...this.searchInfo,
              pageNum: this.currentPage,
              pageSize: this.pageSize
            }
            ajax.export(apis.factory.exportAduit, data).then((res) => {
              this.isSuccess = false;
              if(res.code) {
                if(res.code === "10000000") {

                } else {
                  this.$message.error(res.message)
                }
              }
            })
          },
          fresh() {
            this.getData()
          },
          // 切换页面
          currentPageChange(pageNo) {
            this.currentPage = pageNo
            this.getData()
          },
          // 切换页面条数
          pageSizeChange(pageNo) {
            this.pageSize = pageNo
            this.getData()
          },
          getData() {
            this.dataTable.loading = true;
            let data = {
              ...this.searchInfo,
              pageNum: this.currentPage,
              pageSize: this.pageSize
            };
            ajax.post(apis.factory.getAduitList, data).then(res => {
              if(res.code === "10000000") {
                this.dataTable.data = res.data.dataList;
                this.pageTotal = res.data.total
              } else {
                this.$message.error(res.message)
              }
              this.dataTable.loading = false;
            })
          },
          watchDetail(obj) {
            this.detailTable = {
              repayId: obj.id,
              list: []
            };
            let data = {
              repayId: obj.id
            }
            ajax.get(apis.factory.repayAuditRecord, data).then(res => {
              if(res.code == "10000000") {
                this.detailTable.list.push(res.data)
                this.isShowDetail = true;
              } else {
                this.$message.error(res.message)
              }
            })
          },
          onSearch() {
            this.currentPage = 1;
            this.getData()
          },
          refreshFuc() {
            this.resetForm('searchInfo')
            this.pageSize = 10;
            this.currentPage = 1;
            this.getData()
          },
          resetForm(formName) {
            this.$refs[formName].resetFields();
          },
          reviewModel(obj) {
            this.dataInfo = obj
            this.isShowRepay = true;
          },
          goBack() {
            this.isShowDetail = false
          }
        },
        created() {
          this.onSearch()
        }
    }
</script>

<style lang="scss" scoped>

</style>
